<!--
 * @Author: your name
 * @Date: 2022-01-28 01:38:50
 * @LastEditTime: 2022-01-28 21:19:41
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \json-serveg:\桌面2\VueStudy\vue-ego\vue-ego\src\views\Params\Arguments\ParamsDialog.vue
-->
<template>
  <div>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="70%"
        :before-close="handleClose"
        >
        
        <!-- 显示规格类目 -->
        <TreeGoods @CateName='CateName'/>


        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="innerVisible = true" :disabled='isDisabled'>确 定并添加分组</el-button>
        </span>

        <!-- 二级弹窗嵌套 -->
         <el-dialog
      width="70%"
      title="商品规格参数配置"
      :visible.sync="innerVisible"
      append-to-body
      class="demo-dynamic"
      >
      
      <div class="item">当前选中的商品是:{{treeData.name}}</div>
        
        <el-button class="hr"  type='primary' @click="addDomain" >新增规格列表</el-button>
        <hr>
        <!-- 动态表单项 -->
        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
            
            <el-form-item
                v-for="(item, index) in dynamicValidateForm.groups"
                :label="item.title + index"
                :key="index"
                :prop="item.title"
                :rules="{
                required: true, message: '域名不能为空', trigger: 'blur'
                }"
            >
                <div class="item">
                <el-input v-model="item.title"></el-input>
                <el-button @click.prevent="addDomainGroups(index)">增加子组</el-button>
                <el-button @click.prevent="removeDomain(index)">删除</el-button>
                </div>
                <!-- 内层子组 -->
                    <el-form-item
                        v-for="(ele,i) in item.children"
                        :label="ele.title + i"
                        :key="i"
                        :prop="ele.title"
                        :rules="{
                        required: true, message: '域名不能为空', trigger: 'blur'
                        }"
                    >
                        <div class="item">
                        <el-input v-model="ele.title"></el-input>
                        <el-button @click.prevent="removeChildrenDomain(index,i)">删除</el-button>
                        </div>
                     </el-form-item>

            </el-form-item>
            <!-- <el-form-item>
                <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
                <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
            </el-form-item> -->
            </el-form>
        <!-- 确定取消按钮 -->
        <span slot="footer" class="dialog-footer">
            <el-button  type="primary" @click="submitForm('dynamicValidateForm')">确定</el-button>
        <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
        </span>

        </el-dialog>


        </el-dialog>

  </div>
</template>

<script>
import TreeGoods from '../../Goods/TreeGoods.vue'
export default {
    name:'ParamsDialog',
    components:{
        TreeGoods
    },
    data() {
        return {
            dialogVisible: false,
            innerVisible: false,
            isDisabled:true,
            treeData:{},
            dynamicValidateForm: {//动态表单
                groups: [
                    
                ],
                
                }    
        }
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //获取分类树参数
        CateName(val){
            console.log(val);
            this.isDisabled = false
            this.treeData = val
        },
       /**
        * 提交事件
        */
       submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                // alert('submit!');
          console.log('提交规格参数',this.dynamicValidateForm.groups);
        //   参数：itemCatId,content,specsName
                this.$api.getInsertItemParam({
                    itemCatId:this.treeData.cid,
                    specsName:this.treeData.name,
                    content:JSON.stringify(this.dynamicValidateForm.groups),
                }).then((res) => {
                    // console.log(res.data);
                    // 成功后做一些处理
                    // 关闭弹窗
                    this.innerVisible = false
                    this.dialogVisible = false
                    // 初始化数据
                    this.dynamicValidateForm.groups = []
                    this.isDisabled =true
                    //更新界面
                    this.$parent.http(1)

                })
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        /**
         * 重置
         */
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        /**
         * 增加子组
         */
        addDomainGroups(index){
            this.dynamicValidateForm.groups[index].children.push({
                    value: '',
                    title:''
            })
        },
        /**
         * 删除子组
         */
        removeDomain(index) {
            this.dynamicValidateForm.groups.splice(index, 1)
        },
        /**
         * 删除子组的chilren
         */
        removeChildrenDomain(index,i){
            this.dynamicValidateForm.groups[index].children.splice(i, 1)
        },
        /**
         *添加大组
         */
        addDomain() {
            this.dynamicValidateForm.groups.push({
                    value: '',
                    title:'',
                    children:[]
            });
        }
    }
}
</script>

<style lang="less" scoped>
.demo-dynamic {
  margin: 10px;
}
.item{
   display: flex; 
   margin-bottom: 10px;
   button{
       margin-left: 10px;
   }
}
.hr{
    margin-bottom: 10px;
}

</style>
